<template>
  <div>
    <div ref="header" class="header">
      <van-icon @click="goback" size="18px" name="arrow-left" />
      <div class="title">我要买房 <span>菜单式按需购买服务</span></div>
      <div></div>
    </div>
    <div class="cutpart">按需定制匹配房源和经纪人</div>
    <div class="houseinfo">
      <div class="cell">
        <div>您的购房预算(首付)</div>
        <div class="int">
          <input type="number" v-model="sendval.first" placeholder="请填写" />
          <span style="margin-right: -4px">万元</span>
        </div>
      </div>
      <van-cell title="您想要的户型" is-link @click="show1 = true">{{
        value1
      }}</van-cell>
      <div class="cell">
        <div>您想住多大的面积</div>
        <div class="int">
          <input type="number" v-model="houseAcre" placeholder="请填写" />
          <span style="margin-left: 5px; margin-right: 2px"
            >m<span class="up">2</span></span
          >
        </div>
      </div>
      <van-cell title="您想住的区域" is-link @click="show2 = true">{{
        value2
      }}</van-cell>
      <van-cell title="预计购买时间" @click="showdate = true" is-link>{{
        valuedate
      }}</van-cell>
    </div>
    <div class="btnpart">
      <button @click="jump">帮我找房</button>
      <div class="safe"></div>
    </div>

    <van-popup
      v-model="show1"
      position="bottom"
      :style="{ height: '40%' }"
      @close="onclose1"
    >
      <van-picker
        show-toolbar
        title="户型"
        :columns="columns1"
        @confirm="onConfirm1"
        @cancel="onCancel1"
        visible-item-count="4"
      />
    </van-popup>
    <van-popup
      v-model="show2"
      position="bottom"
      :style="{ height: '40%' }"
      @close="onclose2"
    >
      <van-picker
        show-toolbar
        title="户型"
        :columns="columns2"
        @confirm="onConfirm2"
        @cancel="onCancel2"
        visible-item-count="4"
      />
    </van-popup>
    <van-popup
      v-model="showdate"
      position="bottom"
      :style="{ height: '40%' }"
      @close="onclosedate"
    >
      <van-picker
        show-toolbar
        title="户型"
        :columns="columnsdate"
        @confirm="onConfirmdate"
        @cancel="onCanceldate"
        visible-item-count="4"
      />
    </van-popup>
  </div>
</template>

<script>
import local from "../../utils/local";
import { _local } from "@/utils/storage";
import { getAreaList } from "@/apis/city";
import { wantBuy } from "@/apis/user";

export default {
  data() {
    return {
      sendval: {},
      show1: false,
      show2: false,
      showdate: false,
      houseAcre: "",
      value1: "请选择",
      value2: "请选择",
      valuedate: "请选择",
      columns1: ["1居室", "2居室", "3居室", "4居室", "5居室及以上"],
      columns2: [],
      columnsdate: ["3个月内", "6个月内", "12个月内"],
      arealist: [],
    };
  },
  created() {
    this.getdis();
    // let val = JSON.parse(local.get("keepbuyserch"));
    // if (val) {
    //   this.sendval = val.sendval;
    //   this.value1 = val.value1;
    //   this.value2 = val.value2;
    //   this.valuedate = val.valuedate;
    //   this.houseAcre = val.houseAcre;
    // }
  },
  methods: {
    goback() {
      this.$router.go(-1);
    },
    jump() {
      let keepbuyserch = {};
      keepbuyserch.value1 = this.value1;
      keepbuyserch.value2 = this.value2;
      keepbuyserch.valuedate = this.valuedate;
      keepbuyserch.houseAcre = this.houseAcre;
      keepbuyserch.sendval = this.sendval;
      local.set("keepbuyserch", JSON.stringify(keepbuyserch));
      local.set("buyserch", JSON.stringify(this.sendval));
      console.log("keepbuyserch", keepbuyserch);
      wantBuy({
        first_money: keepbuyserch.sendval.first,
        house_type: keepbuyserch.sendval.houseType,
        house_acre: keepbuyserch.houseAcre,
        citycode: _local.get("cityCode"),
        adcode: keepbuyserch.sendval.adcode,
        expect_month: keepbuyserch.valuedate.slice(0, 1),
      }).then((res) => {
        console.log("wantBuy", res);
        if (res.code == 200 || res.code == 201) {
          this.$dialog
            .alert({
              title: "温馨提示",
              message: "已生成购房需求服务单，可在个人中心服务订单里面查看",
              confirmButtonColor: "#45b7cb",
              theme: "round-button",
              messageAlign: "left",
            })
            .then(() => {
              this.$router.push({ path: "/buyseekresult" });
            });
        } else {
          this.$toast(res.msg);
        }
      });
    },
    async getdis() {
      await getAreaList({
        citycode: _local.get("cityCode"),
      }).then((res) => {
        console.log("getAreaList", res);
        if (
          this.city === "上海市" ||
          this.city === "北京市" ||
          this.city === "天津市" ||
          this.city === "重庆市"
        ) {
          this.arealist = res.result.list.slice(1);
          this.arealist.forEach((e, i) => {
            this.columns2[i] = e.name;
          });
        } else {
          this.arealist = res.result.list.slice(2);
          this.arealist.forEach((e, i) => {
            this.columns2[i] = e.name;
          });
        }
      });
    },
    onclose1() {
      this.show1 = false;
    },
    onclose2() {
      this.show2 = false;
    },
    onclosedate() {
      this.showdate = false;
    },
    onConfirm1(value) {
      if (value == "1居室") {
        this.sendval.houseType = "1";
      } else if (value == "2居室") {
        this.sendval.houseType = "2";
      } else if (value == "3居室") {
        this.sendval.houseType = "3";
      } else if (value == "4居室") {
        this.sendval.houseType = "4";
      } else if (value == "5居室及以上") {
        this.sendval.houseType = "5";
      }
      this.value1 = value;
      this.show1 = false;
    },
    onCancel1() {
      this.show2 = false;
    },
    onConfirm2(value) {
      this.value2 = value;
      this.arealist.forEach((e) => {
        if (e.name == value) {
          this.sendval.adcode = e.adcode;
          return;
        }
      });
      this.show2 = false;
      if (this.valuedate == "请选择") {
        this.showdate = true;
      }
    },
    onCancel2() {
      this.show2 = false;
    },
    onConfirmdate(value) {
      // if (value == "3个月内") {
      //   this.sendval.time = "1";
      // } else if (value == "6个月内") {
      //   this.sendval.time = "2";
      // } else if (value == "12个月内") {
      //   this.sendval.time = "3";
      // }
      this.valuedate = value;
      this.showdate = false;
    },
    onCanceldate() {
      this.showdate = false;
    },
    formatDate(date) {
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
    },
    showScroll() {
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      if (scrollTop > 120) {
        this.$refs.header.style.backgroundColor = "#fff";
        this.$refs.header.style.color = "#333";
      } else {
        this.$refs.header.style.backgroundColor = "";
        this.$refs.header.style.color = "#fff";
      }
    },
  },
  mounted() {
    window.addEventListener("scroll", this.showScroll);
  },
  destroyed() {
    window.removeEventListener("scroll", this.showScroll);
  },
};
</script>

<style scoped lang="less">
.header {
  position: fixed;
  left: 0;
  top: 0;
  padding: 10px 15px;
  z-index: 1000;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  font-size: 15px;
  color: #fff;
  .title {
    line-height: 25px;
    height: 25px;
    font-size: 18px;
    font-weight: bold;
    margin-left: 10px;
    span {
      font-size: 12px;
      font-weight: normal;
    }
  }
}
.cell {
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  margin: 0 20px 0 26px;
  padding: 10px 0 10px 0;
  color: #333;
  border-bottom: 1px solid #f1f1f1;
  .int {
    font-size: 14px;
    display: flex;
    align-items: center;
    > span {
      line-height: 21px;
      color: #969799;
      font-size: 12px;
      margin-left: 4px;
      transform: scale(calc(10 / 12));
    }
    .up {
      font-size: 9px;
      vertical-align: super;
    }
  }
}
.van-cell {
  padding: 10px 26px;
}
input {
  height: 26px;
  width: 80px;
  text-align: right;
  border: none;
  box-sizing: border-box;
  color: #969799;
  &::placeholder {
    color: #969799;
  }
}
/deep/.pcell {
  .van-cell__value {
    padding-right: 17px;
  }
}
.cutpart {
  height: 150px;
  width: 100%;
  color: #fff;
  background: url("../../assets/buysell01.png") no-repeat 0px 0px;
  background-size: 100% 100%;
  text-align: center;
  box-sizing: border-box;
  padding: 100px 0 0;
  font-weight: bold;
}
.btnpart {
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  z-index: 100;
  padding: 10px 0;
  border-top: 1px solid #f1f1f1;
  background-color: #fff;
  text-align: center;
  button:active {
    background-image: linear-gradient(to bottom right, #6fcddd78, #49b9cd77);
  }
  button {
    border: none;
    border-radius: 20px;
    height: 40px;
    width: 90%;
    color: #fff;
    background-image: linear-gradient(to bottom right, #6fccdd, #49b9cd);
  }
  .safe {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
}
</style>
